<template>
  <tn-popup
    v-model="showPopup"
    mode="bottom"
    :safe-area-inset-bottom="false"
    :mask="mask"
    :transparent-mask="transparentMask"
    :z-index="zIndex"
    :content-custom-style="customPopupContentStyle"
    close-icon=""
    @close="handlePopupClose"
  >
    <view class="tn-keyboard tn-safe-area-inset-bottom">
      <!-- 头部 -->
      <view class="tn-keyboard__header">
        <slot name="header"></slot>
      </view>

      <!-- keyboard内容选择区 -->
      <view class="tn-keyboard__content">
        <tn-number-keyboard
          v-if="mode === 'number' || mode === 'card'"
          ref="numberKeyboardRef"
          v-bind="props"
          @change="handleKeyboardChange"
          @backspace="handleKeyboardBackspace"
          @confirm="handleKeyboardConfirm"
        ></tn-number-keyboard>
        <tn-car-keyboard
          v-if="mode === 'car'"
          v-bind="props"
          @change="handleKeyboardChange"
          @backspace="handleKeyboardBackspace"
          @confirm="handleKeyboardConfirm"
        ></tn-car-keyboard>
      </view>
    </view>
  </tn-popup>
</template>

<script lang="ts" setup>
import { keyboardProps, keyboardEmits } from '../../../types/tn-keyboard'
import { CSSProperties, ref, watch } from 'vue'
import { UPDATE_MODEL_EVENT, UPDATE_SHOW_EVENT } from '../../../constants'
import TnPopup from '../../tn-popup/src/Popup.vue'
import TnNumberKeyboard from './NumberKeyboard.vue'
import TnCarKeyboard from './CarKeyboard.vue'

const props = defineProps(keyboardProps)
const emits = defineEmits(keyboardEmits)

let numberKeyboardRef = ref<InstanceType<typeof TnNumberKeyboard>>()

// popup显示
let showPopup = ref<boolean>(false)
watch(() => props.show, (val: boolean) => {
  if (props?.random && props.mode === 'number') {
    numberKeyboardRef.value?.resetRandom()
  }
  showPopup.value = val
},{
  immediate: true
})
// popup自定义内容样式
const customPopupContentStyle = ref<CSSProperties>({
  backgroundColor: 'transparent'
})

// 用户选择的值
let value = ref<string>('')
watch(() => props.modelValue, (val: string | number) => {
  value.value = String(val)
})

// 键盘事件
const handleKeyboardChange = (val: string | number) => {
  updateValue(value.value + String(val))
}
const handleKeyboardBackspace = () => {
  if (value.value.length <= 0) return
  updateValue(value.value.slice(0, value.value.length - 1))
}
const handleKeyboardConfirm = () => {
  emits('confirm', value.value)
}

// 取消事件
const handleCancelEvent = () => {
  emits('cancel')
  handlePopupClose()
}
// 确认事件
const handleConfirmEvent = () => {
  emits('confirm', value.value)
  handlePopupClose()
}

// 更新输入值
const updateValue = (val: string | number) => {
  emits(UPDATE_MODEL_EVENT, val)
}

// popup关闭事件
const handlePopupClose = () => {
  emits(UPDATE_SHOW_EVENT, false)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-keyboard {
  width: 100%;
  position: relative;
  background-color: #F8F7F8;
  border-top: 1rpx solid #E6E6E6;

  &__header {
    width: 100%;
  }

  &__content {
    width: 100%;
  }
}
</style>
